<template>
    <div class="container">
        <van-nav-bar title="发现" />

        <!-- 下拉刷新组件 -->
        <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
            <!-- 列表加载组件 -->
            <van-list
                v-model:loading="loading"
                v-model:finished="finished"
                finished-text="没有更多数据了"
                @load="OnLoad"
            >
                <!-- 动态渲染分享列表 -->
                <div class="box" v-for="(item, index) in list" :key="index">
                    <div class="item">
                        <div class="top">
                            <div class="avatar">
                                <div class="image">
                                    <img :src="item.user_avatar || '/assets/images/avatar.png'" />
                                </div>
                                <div class="name">{{ item.business.nickname || '未知用户' }}</div>
                            </div>
                            <div class="follow" v-if="!item.is_followed">
                                <van-button
                                    type="primary"
                                    icon="plus"
                                    size="small"
                                    color="#7232dd"
                                    @click="followUser(item.user_id)"
                                    >关注</van-button
                                >
                            </div>
                        </div>

                        <div class="content">{{ item.content }}</div>

                        <!-- 多图展示 -->
                        <div class="images" v-if="item.thumbs && item.thumbs.length">
                            <div class="image" v-for="(img, i) in item.thumbs" :key="i">
                                <img :src="img" @click="previewImage(item.thumbs, i)" />
                            </div>
                        </div>

                        <!-- 商品卡片 -->
                        <!-- <div class="product" v-if="item.product.name">
                            <div class="left">
                                <img :src="item.product.thumb" />
                            </div>
                            <div class="right">
                                <div class="name">{{ item.product.name }}</div>
                                <div class="price">{{ item.product.price }}</div>
                            </div>
                        </div> -->

                        <!-- <div class="action">
                            <div class="left">{{ formatTime(item.create_time) }}</div>
                            <div class="right">
                                <div class="item" @click="likeShare(item.id)">
                                    <van-icon :name="item.is_liked ? 'like' : 'like-o'" :color="item.is_liked ? '#ff4040' : ''" />
                                    <span>{{ item.like_count }}</span>
                                </div>
                                <div class="item" @click="showComments(item.id)">
                                    <van-icon name="chat-o" />
                                    <span>{{ item.comment_count }}</span>
                                </div>
                                <div class="item" @click="shareToFriend(item.id)">
                                    <van-icon name="share-o" />
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <!-- 评论弹窗 -->
        <van-popup v-model:show="showCommentPopup" position="bottom" :height="'80%'">
            <!-- 评论内容 -->
        </van-popup>
    </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount, reactive, ref } from 'vue';
const { proxy } = getCurrentInstance();

// 定义响应式数据
// const shareList = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const page = ref(1);
const list = ref([]);

//挂载
const OnRefresh = async () => {
    list.value = [];
    page.value = 1;
    refreshing.value = true;
    loading.value = true;
    finished.value = false;

    setTimeout(OnLoad, 1500);
}

// 挂载时加载数据
// onBeforeMount(() => {
//     OnLoad();
// });

// 加载分享数据
const OnLoad = async () => {
    if (refreshing.value === true) {
        refreshing.value = false;
    }
    //组装数据
    const params = {
        page: page.value
    }

    const result = await proxy.$http.post('/share/index', params);

    loading.value = false;

    console.log(result);

    if (result.code === 1) {
        let count = result.data.count;
        list.value = list.value.concat(result.data.list);

        if (list.value.length >= count) {
            finished.value = true;

            return false;
        }

        page.value  += 1;
    }else {
        finished.value = true;

        proxy.$fail(result.msg);
    }

};

</script>

<style scoped>
@import url('/assets/css/share.css');
</style>